

<template>
  <div class="order-detail-box">
    <s-header :name="'订单详情'" @callback="close"></s-header>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>
          {{ showStatus(state.detail.status) }}
        </span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ state.detail.orderNo }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ showDateTime(state.detail.createdAt) }}</span>
      </div>
      <van-button class="primary-btn" v-if="state.detail.payStatus == 0 && state.detail.status == 0" style="margin-bottom: 10px" block @click="payOrder">去支付</van-button>
      <!-- <van-button class="primary-btn" v-if="!(state.detail.payStatus !+ 0 || state.detail.orderStatus == 3)" block @click="handleCancelOrder(state.detail.orderNo)">取消订单</van-button> -->
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ state.detail.finalAmount }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>{{ showShipType(state.detail.shipType) }}</span>
      </div>
      <div class="price-item" v-if="state.detail.shipType == 'same'">
        <label>快递单号：</label>
        <span>{{ state.detail.expressNote || '-' }}</span>
      </div>
      <div class="price-item" v-if="state.detail.shipType == 'delivery'">
        <label>配送日期：</label>
        <span>{{ state.detail.shipDate }}</span>
      </div>
      <div class="price-item" v-if="state.detail.shipType == 'delivery'">
        <label>配送时间：</label>
        <span>{{ state.detail?.shipTime }}</span>
      </div>
      <div class="price-item">
        <label>备注：</label>
        <span>{{ state.detail?.buyerMsg || '-' }}</span>
      </div>
    </div>
    <!-- 地址 -->
    <div class="address-wrap">
      <div class="name">
        <span>{{ state.detail.name }} </span>
        <span> | </span>
        <span>{{ state.detail.phone }}</span>
      </div>
      <div class="address">
        {{state.detail.province + state.detail.city + state.detail.area + state.detail.addr}}
      </div>
    </div>
    <!-- 商品信息 -->
    <van-card
        v-for="spec in state.detail.product"
        :key="state.detail.orderNo"
        :num="spec.quantity"
        :price="state.detail.finalAmount"
        :desc="spec.specName"
        :title="spec.productName"
        :thumb="spec.imagePath"
    />
    <!-- 附件信息 -->
    <div class="good-charges" v-if="state.detail.charges&&state.detail.charges.length>0">
      <nut-collapse>
        <nut-collapse-item name="name3">
          <template #title>收费附件</template>
          <template #value><div class="charges-price"></div></template>
          <div class="charge-item" v-for="charge in state.detail.charges" :key="charge.id">
            <div class="charge-name">{{charge.name}}</div>
            <div class="charge-price">{{charge.price}}</div>
            <div class="charge-count">{{charge.count}}</div>
          </div>
        </nut-collapse-item>
      </nut-collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import sHeader from '@/components/SimpleHeader.vue'
import {fetchOrderDetail, fetchPayOrder} from '@/service/order'
import {showConfirmDialog, showLoadingToast, closeToast, closeDialog, showToast} from 'vant'
import { useRoute } from 'vue-router'
import dayjs from "dayjs";
const route = useRoute()
const state = reactive<any>({
  detail: {},
  showPay: false
})

onMounted(() => {
  init()
})

const init = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true
  });
  const { id } = route.query
  const { data } = await fetchOrderDetail(id)
  state.detail = data
  try {
    state.detail.charges = JSON.parse(data.chargeExtend)
  } catch (e) {
    state.detail.charges = []
    console.log(e)
  }
  closeToast()
}


const showStatus = (status: string) => {
 const statusMap = {
  '0': '待确认',
  '1': '已确认',
  '2': '已完成',
  '3': '已取消',
  '4': '待配送',
  '5': '已配送'
 }
 return statusMap[status]
}

const showShipType = (type: string) => {
 const shipTypeMap = {
  'delivery': '商家配送',
  'shop': '门店自提',
  'same': '快递',
 }
 return shipTypeMap[type]
}

// const handleCancelOrder = (id) => {
//   showConfirmDialog({
//     title: '确认取消订单？',
//   }).then(() => {
//     // cancelOrder(id).then(res => {
//     //   if (res.resultCode == 200) {
//     //     showSuccessToast('删除成功')
//     //     init()
//     //   }
//     // })
//   }).catch(() => {
//     // on cancel
//   });
// }

//@ts-ignore
const handleConfirmOrder = (id) => {
  showConfirmDialog({
    title: '是否确认订单？',
  }).then(() => {
    // confirmOrder(id).then(res => {
    //   if (res.resultCode == 200) {
    //     showSuccessToast('确认成功')
    //     init()
    //   }
    // })
  }).catch(() => {
    // on cancel
  });
}

const payOrder = async () => {
  try {
    const res = await fetchPayOrder(state.detail.id)
    const url = res.data.url
    location.href = url
  } catch (e:any) {
    showToast(e.msg || e.message)
  }
}

const showDateTime = (time: any) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const close = () => {
  closeDialog
}
</script>

<style lang="less" scoped>
@import '../common/style/mixin';
  .order-detail-box {
    background: #f7f7f7;
    .primary-btn {
      background: @primary;
      color: #fff;
    }
    .order-status {
      background: #fff;
      padding: 20px;
      font-size: 15px;
      .status-item {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .order-price {
      background: #fff;
      margin: 20px 0;
      padding: 20px;
      font-size: 15px;
      .price-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        label {
          color: #999;
        }
        span {

        }
      }
    }
    .address-wrap {
      margin-bottom: 20px;
      background: #fff;
      position: relative;
      font-size: 14px;
      padding: 15px;
      color: #222333;
      .name, .address {
        margin: 10px 0;
      }
      .arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
      }
      &::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background-size: 80px;
        content: '';
      }
      &::after {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 2px;
        background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
        background-size: 80px;
        content: '';
      }
    }
    .van-card {
      margin-top: 0;
    }
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .good-charges {
      --nut-collapse-wrapper-content-background-color: #fff5f3;
      --nut-collapse-wrapper-content-padding: 0 26px;
      :deep(.nut-collapse-item__title) {
        background: #fff5f3;
      }
      border-top: 1px solid #ccc;
      .charge-item {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0;
        .charge-name {
          margin-right: auto;
        }
        .charge-price {
          margin-right: 10px;
          color: @primary;
          &::before {
            content: "￥";
            font-size: 12px;
          }
        }
        .charge-count {
          &::before {
            content: "x";
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
